
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<title>时间扩展版</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script type="text/javascript" src="./miaov.js"></script>
<style type="text/css">
	*{
		margin: 0;
		padding:0;
		font-family: "微软雅黑";
	}
	ul{
		list-style: none;
		position: relative;
		top:30px;
		left: 30px;
	}
	ul li{
		position: absolute;
		top:0;
		overflow: hidden;
		width: 56px;
		height: 92px;
	}
	ul li img{
		display: block;
		position: absolute;
	}
	ul li .pic01{
		top:0;
	}
	ul li .pic02{
		top:92px;
	}
</style>
</head>
<body>
	<ul id="panel">
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
		<li><img src="" class="pic01"/><img src="" class="pic02"/></li>
	</ul>
<script type="text/javascript">

window.onload=function(){
	var arr=['images/0.png','images/1.png','images/2.png','images/3.png','images/4.png','images/5.png','images/6.png','images/7.png','images/8.png','images/9.png','images/mao.png']
	var panel = document.getElementById("panel");
	var aLi = panel.getElementsByTagName("li");
	var nTime =null //下一秒
	var str =null //这一秒 字符串
	var nstr =null //下一秒 字符串
	// 画格子
	for(var i=0;i<aLi.length;i++){
		aLi[i].style.left= 56*i+'px'
	}
	// 每隔一秒算时间
	showTime1(str);
	showTime2(nstr);
	setInterval(function(){
 				showTime1(str);
 				showTime2(nstr);
			 },1000);
	// 初始化  
	initial(aLi)
	// 为每个位置添加定时器监听
	timeRoll(aLi,0);
	timeRoll(aLi,1);
	timeRoll(aLi,3);
	timeRoll(aLi,4);
	timeRoll(aLi,6);
	timeRoll(aLi,7);
	function timeRoll(lis,i){
		setInterval(function(){
			var pNumber= str.charAt(i)
			var tNumber= nstr.charAt(i)
			var pImg= lis[i].getElementsByTagName("img")[0];
			var nImg= lis[i].getElementsByTagName("img")[1];
			if(pNumber!==tNumber && parseInt(getStyle(nImg,'top'))===92){
				nImg.src=arr[nstr.charAt(i)];
				doMove(nImg, 'top', 5, 0, function(){})
				doMove(pImg, 'top', 5, -92, function(){
					pImg.style.top='92px'
					pImg.src=arr[str.charAt(i)];
				});
			}else if(pNumber!==tNumber && parseInt(getStyle(pImg,'top'))===92){
				pImg.src=arr[nstr.charAt(i)]
				doMove(pImg, 'top', 5, 0,function(){})
				doMove(nImg, 'top', 5, -92, function(){
					nImg.style.top='92px'
					nImg.src=arr[str.charAt(i)];
				})
			}
		},1000)
	}

	// 
	// 计算上一秒的时间
function showTime1(){
	var iNow = new Date()
	var nHours=iNow.getHours();
	var nMinutes=iNow.getMinutes();
	var nSecondes=iNow.getSeconds();
	str=toTwo(nHours)+':'+toTwo(nMinutes)+':'+toTwo(nSecondes);
}
// 计算下一秒的时间
function showTime2(){
	var iNow=new Date();
	nTime=iNow.getTime()+1000;
	iNew=new Date(nTime);
	var tHours=iNew.getHours();
	var tMinutes=iNew.getMinutes();
	var tSecondes=iNew.getSeconds();
	nstr=toTwo(tHours)+':'+toTwo(tMinutes)+':'+toTwo(tSecondes);
}
// 初始化
function initial(aLi){
	for(var i=0;i<aLi.length;i++){
		if(i!=2&&i!=5){
			console.log(str.charAt(i))
			aLi[i].getElementsByTagName("img")[0].src=arr[str.charAt(i)];
			aLi[i].getElementsByTagName("img")[1].src=arr[nstr.charAt(i)];
		}else{
			aLi[i].getElementsByTagName("img")[0].src=arr[10];
		}
	}
}
}


</script>
</body>
</html>
